<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
  <title>CSS Test: Bidi Codes, White space, and Tree structure</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/inline/bidi/004.html" type="text/html"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#bidi-box-model"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#white-space-model"/>
  <link rel="help" href="http://unicode.org/reports/tr9/"/>
  <meta name="assert" content="The final order of characters in a block container
     is the same as if markup had been stripped, consecutive space collapsed in
     logical order, and the resulting character sequence, including any bidi codes,
     had been passed to an implementation of the Unicode bidirectional algorithm
     for plain text that produced the same line-breaks as the styled text."/>
  <style type="text/css">* { margin: 0; padding: 0 }
   div p { clear: left; border: solid; margin: 1em; padding: 0.5em; background: #FFFFCC; color: black; }
   .test { line-height: 3em; }
   .control { line-height: 3em; }
   .a { color: navy; }
   .b { color: orange; }
  </style>
 </head>
 <body>
  <p> The following two blocks should be identical, including overflow. (Force bidi: &#x05D0;) </p>
  <div>
   <p>
    <span class="control a start"> aaa bbb ccc ddd eee </span> <br/>
    <span class="control b start"> fff                 </span>
                                   ggg hhh iii
    <span class="control a end">   jjj                 </span> <br/>
    <span class="control b end">   kkk lll mmm nnn ooo </span>
   </p>
   <p>
    <span class="test a"> aaa         bbb          ccc &#x202E; eee                       ddd<br/>
                          jjj </span> iii          hhh          ggg <span class="test b"> fff<br/>
                          lll         kkk&#x202C; mmm          nnn                       ooo </span>
   </p>
  </div>
 </body>
</html>
